<template>
  <div v-if="pageAuth">
    <page-header :title="$t('m.Operation_log')" />

    <!--容器-->
    <div class="container box-index">
      <div class="box_index">
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" />

        <!--分割线-->
        <div class="line"></div>

        <!-- 表格栏 -->

        <div class="table-box">
          <fast-table :options="fastTableOptions" :data="page.records" />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PageHeader from '../../components/page-header.vue'
import page from '@/mixins/page'
import SearchBar from '@/components/search-bar.vue'
import FastTable from '@/components/fast-table.vue'
import Pagination from '@/components/pagination.vue'

export default {
  components: { Pagination, FastTable, SearchBar, PageHeader },
  mixins: [page],
  data () {
    return {
      params: {
        rangeTime: '',
        search: '',
        type: ''
      },
      //操作类型：1-订单 3-代理 5-机柜 6-充电宝 7-计费规则 8-用户 9-网点 11-会员 13-优惠券 15-系统用户 16-机柜广告管理 17-播放管理 18-积分 19-优惠码 20-邀请奖励
      options: [
        { label: this.$t('m.all'), value: '' },
        { label: this.$t('m.Rental_order'), value: '1' },
        { label: this.$t('m.Users_list'), value: '8' },
        { label: this.$t('m.Menu_Vendor_Merchant'), value: '9' },
        { label: this.$t('m.Franchisee_'), value: '3' },
        { label: this.$t('m.Station_stations'), value: '5' },
        { label: this.$t('m.Menu_Device_PowerBank'), value: '6' },
        { label: this.$t('m.Coupon'), value: '13' },
        { label: this.$t('m.promo_code'), value: '19' },
        { label: this.$t('m.point'), value: '18' },
        { label: this.$t('m.Referral'), value: '20' },
        { label: this.$t('m.Program_list'), value: '17' },
        { label: this.$t('m.program'), value: '16' },
        { label: this.$t('m.settingPricePlan'), value: '7' },
        { label: this.$t('m.Account_information'), value: '15' }
      ],

      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.operationalMotion'),
            prop: 'action',
            formatter: row => this.$t(`m.${row.action}`)
          },
          {
            label: this.$t('m.operationNote'),
            prop: 'remark',
            showOverflowTooltip: true,
            formatter: row => this.$format.strFormat(row.remark)
          },
          {
            label: this.$t('m.Order_Operation_Type'),
            prop: 'type',
            formatter: row => this.$format.stateFormat(row.type, this.options)
          },
          {
            label: this.$t('m.branch_Creationdate'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          },
          {
            label: this.$t('m.operator'),
            prop: 'operator'
          },
          {
            label: this.$t('m.accountOrMobilePhone'),
            prop: 'phone'
          }
        ]
      },
      pageAuth: this.permissionsId(128)
    }
  },
  created () {
    if (!this.pageAuth) {
      return
    }
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            placeholder: this.$t('m.enterUserNames')
          },
          {
            value: '',
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.Operation_date')
          },
          {
            value: '',
            type: 'select',
            prop: 'type',
            label: this.$t('m.Order_Operation_Type'),
            options: this.options
          }
        ]
      }
    },
    getPage () {
      this.$api.setting
        .getPageForOperationLog(this.params, this.page)
        .then(res => {
          if (this.$ok(res)) {
            this.page = res.data
          }
        })
    }
  }
}
</script>
<style scoped lang="scss"></style>
